<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>服务单信息</div>
            <div>
              <el-button icon="el-icon-arrow-left" @click.native="returnButton">返回</el-button>
            </div>
          </el-header>
          <div :data="tableData">
            <el-main class="info-main">
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">服务单号</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.id"></div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">申请状态</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.status"></div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">订单编号</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.orderId">
                    <span></span>&nbsp;&nbsp;
                    <a @click="select" href="javascript:;">查看</a>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">申请时间</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.applyTime"></div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">用户账号</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.userAccount"></div>
                </el-col>
              </el-row>
            </el-main>
            <el-footer class="info-main" style="height:100%;">
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">订单金额</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.maoney"></div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">确认退款金额</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.payMoney"></div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">退款方式</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.refundWay"></div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">退款类型</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.type"></div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">退款原因</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.returnCause"></div>
                </el-col>
              </el-row>
            </el-footer>
            <el-main class="info-main">
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">处理备注</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple" v-text="from.remark"></div>
                </el-col>
              </el-row>
            </el-main>
          </div>
          <el-footer style="text-align: center;">
            <el-button @click="configButton" type="primary">确认退款</el-button>
            <el-button @click="refusedButton" type="danger">拒绝退款</el-button>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import reorderItemApi from "@/api/order/reorderItemlist";
import reorderApi from "@/api/order/reorderlist";
import request from "@/utils/request";
export default {
  data() {
    return {
      tableData: [],

      ids: [],

      from: {
        id: "",
        status: "",
        orderId: "",
        applyTime: "",
        userAccount: "",
        maoney: "",
        payMoney: "",
        refundWay: "退回原有支付方式",
        type: "",
        returnCause: "",
        remark: ""
      }
    };
  },

  mounted() {
    var ids = this.$route.query.id;
    this.from.id = ids;

    this.intdata(ids);
  },
  methods: {
    intdata(ids) {
      this.ids[0] = ids;
      reorderItemApi.getFindGoods(this.ids).then(response => {
        console.log(response);
        var data = JSON.parse(JSON.stringify(response.data.data));
        this.tableData = data[0].list;
        console.log(data);
        this.from.status = data[0].returnOrder.status;
        if (this.from.status == 0) {
          this.from.status = "待处理";
        } else if (this.from.status == 1) {
          this.from.status = "退货中";
        } else if (this.from.status == 2) {
          this.from.status = "已完成";
        } else if (this.from.status == 3) {
          this.from.status = "已拒绝";
        }
        this.from.orderId = data[0].returnOrder.orderId;
        this.from.applyTime = data[0].returnOrder.applyTime;
        this.from.userAccount = data[0].returnOrder.userAccount;
        this.from.maoney = data[0].list[0].money;
        this.from.payMoney = data[0].list[0].payMoney;
        this.from.type = data[0].returnOrder.type;
        if (this.from.type == 0) {
          this.from.type = "退货";
        } else if (this.from.type == 1) {
          this.from.type = "退款";
        }
        this.from.returnCause = data[0].returnOrder.returnCause;
        if(this.from.returnCause == 0){
          this.from.returnCause="质量问题";
        }else if (this.from.returnCause == 1) {
          this.from.returnCause = "屏幕问题";
        } else if (this.from.returnCause == 2) {
          this.from.returnCause = "通信问题";
        } else if (this.from.returnCause == 3) {
          this.from.returnCause = "电池问题";
        }
        this.from.remark = data[0].returnOrder.remark;
      });
    },

    //点击确认后修改状态
    configButton(ids) {
      this.$confirm("是否退款" + "提示", {
        type: "warning"
      }).then(() => {
      reorderApi.getUpdateStatus(this.ids).then(response => {
        const resp1 = response.data;
        console.log(resp1);
        if (resp1.code == 200) {
          this.$router.replace({ path: "/order/goodReturn" });
        } else {
          this.$message({
            message: "这个为已完成",
            type: "warning"
          });
        }
      });
      });
    },

    //点击确认后修改状态2
    refusedButton(ids) {
      this.$confirm("是否拒绝退款" + "提示", {
        type: "warning"
      }).then(() => {
      reorderApi.getUpdateStatusTwo(this.ids).then(response => {
        const resp = response.data;
        console.log(resp);
        if (resp.code == 200) {
          this.$router.replace({ path: "/order/goodReturn" });
        } else {
          this.$message({
            message: "这个为已拒绝",
            type: "warning"
          });
        }
      });
      });
    },

    returnButton() {
      this.$router.replace({ path: "/order/drawBack" });
    },
    select() {
      alert("查看订单详情");
    }
  }
};
</script>

<style scoped>
.common-home {
  background-color: #f3f3f3;
}
.common-home,
.content-header {
  border-bottom: 1px solid #e4e4e4;
  position: relative;
}
.common-home > div {
  display: inline-block;
  width: 100px;
  height: 50px;
  vertical-align: top;
  line-height: 50px;
  color: #666666;
}
.common-home > .refresh {
  position: absolute;
  right: 10px;
}
.common-home > div > span {
  border: 4px solid #0399fe;
  display: inline-block;
  width: 0px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
  background-color: #0399fe;
}
.parent-body {
  border: 1px solid #e4e4e4;
}
.content-header {
  height: 50px;
  line-height: 50px;
  background-color: #f3f3f3;
  color: #666666;
}
.bg-purple {
  border: 1px solid #e4e4e4;
}
.bg-color {
  background-color: #f9fafc;
}
.grid-content {
  min-height: 36px;
  line-height: 36px;
  text-align: left;
  font-size: 14px;
  padding-left: 50px;
  color: #666666;
}
.info-main {
  background-color: #fff;
}
.el-row {
  margin-bottom: 0 !important;
}
.el-col {
  height: auto !important;
}
</style>